<template>
	<view class="mian">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="top_bg">
			<view class="top_tou">
				<view class="top_tou2">
					<image class="img" :src="!!userinfo.wx_img?userinfo.wx_img:'http://img.cpgm.cc/panda/static/login/logo.png'"
						mode="widthFix"></image>
					<view class="right_ho">
						<view class="phto">
							{{!!userinfo.wx_nickname?userinfo.wx_nickname:'潮玩新人'}}
						</view>
						<view class="yaoqing">
							ID：{{userinfo.invite_code}}
						</view>
					</view>
				</view>
				<image class="setting" @click="$p.navto('/pages/my/setting')" src="http://img.cpgm.cc/panda/static/self/setting.png" mode="widthFix" />
			</view>


			<view class="proprety">
				<view class="p_list">
					<view class="p_item p_item1" @click="$p.navto('/pages/my/my_crystal')">
						<text>水晶</text>
						<text>{{userinfo.crystal}}</text>
					</view>
					<view class="p_item p_item2" @click="$p.navto('/pages/my/mygem')">
						<text>宝石</text>
						<text>{{userinfo.jewel}}</text>
					</view>
					<view class="p_item p_item3" @click="$p.navto('/pages/my/my_silver')">
						<text>银元</text>
						<text>{{userinfo.silver}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="tit">我的熊猫潮卡</view>
			<view class="mycard" @click="$p.navto('/pages/my/mycard')">
				<image class="cardbg" src="http://img.cpgm.cc/panda/static/self/cardbg2.png" mode="widthFix" />
				<view class="posap"> <text>{{userinfo.cards}}</text> 张</view>
				<image class="card2" src="http://img.cpgm.cc/panda/static/self/card2.png" mode="widthFix" />
			</view>

			<!-- 运营活动专区 -->
			<view class="operate">
				<p>运营活动专区</p>
				<scroll-view scroll-x class="acbox"> 
					<view class="ilist">
						<image @click="$p.navto('/pages/my/myreward')" src="http://img.cpgm.cc/panda/static/self/ac1.png" mode="heightFix" />
						<image  @click="hongbao"  src="http://img.cpgm.cc/panda/static/self/ac2.png" mode="heightFix" />
					</view>
						
				</scroll-view>
			</view>

			<view class="tit mart12">常用功能</view>
			<view class="botbox">
				<view class="w20" v-for="(item,index) in list" :key="index" @click="opento(item)">
					<view class="item">
						<image :src="`http://img.cpgm.cc/panda/static/self/${item.id}.png`" mode="widthFix" />
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商务合作 -->

		<u-mask :show="show2">
			<view class="warp">
				<view class="maskbox">
					<image class="m_closed" @click="show2 = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
					<h3>商务合作</h3>
					<view class="m_content">
						<p>合作和建议请联系（请注明来意）</p>
						<view class="link">hefeiyiyou@163.com</view>
						<view class="button" @click="copy('hefeiyiyou@163.com')">复制邮箱</view>
					</view>
				</view>
			</view>
		</u-mask>
		

		<!-- 我的邀请人 -->
		<u-mask :show="showinvite">
			<view class="warp">
				<view class="myinvite">
					<view class="m_title">
						<text>我的邀请人</text>
					</view>
					<view class="info">
						<image :src="userinfo.p_wx_img? userinfo.p_wx_img: 'http://img.cpgm.cc/panda/static/login/logo.png'" mode="widthFix" />
						<text>{{ userinfo.p_wx_nickname ? userinfo.p_wx_nickname : "潮玩新人" }}</text>
						<view class="weixin">
							<view class="wxh"> 微信号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_wx" placeholder="暂未设置"
								id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
						<view class="weixin">
							<view class="wxh"> QQ号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_QQ" placeholder="暂未设置"
								id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
						<view class="weixin">
							<view class="wxh"> 手机号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_phone"
								placeholder="暂未设置" id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
					</view>
				</view>
				<image class="close" @click="showinvite = false" src="http://img.cpgm.cc/panda/static/public/close.png"
					mode="widthFix"></image>
			</view>
		</u-mask>



		<u-mask :show="kfshow">
			<view class="warp">
				<view class="kfbox">
					<image class="closedd" @click="kfshow = false" src="../../static/public/close.png" mode="widthFix" />
					<h3>在线客服</h3>
					<view class="kfcontent">
						<view class="k_item" @click="$p.navto('/pages/my/vipservice')">
							<view class="k_left">
								<image src="../../static/self/kf2.png" mode="widthFix" />
								<text>专属客服</text>
							</view>
							<image class="you" src="../../static/my/you.png" mode="widthFix" />
						</view>
						<view class="k_item" @click="$p.navto('/pages/my/service_kf?id=1')">
							<view class="k_left">
								<image src="../../static/self/kf1.png" mode="widthFix" />
								<text>装备奖励客服</text>
							</view>
							<image class="you" src="../../static/my/you.png" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
	import config from '@/common/config/index'
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				show: false,
				show2: false,
				showinvite:false,
				myList: [{
						name: '钱包金额',
						num: '0.00'
					},
					{
						name: '水晶剩余',
						num: '0.00'
					}, {
						name: '银元剩余',
						num: '0.00'
					}
				],
				userinfo: uni.getStorageSync('userinfo'),
				list:[
					{
						id:1,
						name:'我的团队',
						path:'/pages/my/myTeam'
					},
					{
						id:13,
						name:'邀请好友',
						path:'/pages/my/inviteFriends'
					},
					{
						id:2,
						name:'在线客服',
					},
					{
						id:3,
						name:'实名认证',
						path:'/pages/my/authentication'
					},
					{
						id:4,
						name:'收款方式',
						path:'/pages/my/paymentMethod',
					},
					{
						id:5,
						name:'商务合作',
						path:''
					},
					{
						id:6,
						name:'收货地址',
						path:'/pages/forest/address'
					},
				],
				p_wx: "",
				p_QQ: "",
				p_phone: "",
				kfshow:false,
			};
		},
		onShow() {
			this.$getUserInfo.getUserInfo((res) => {
				this.userinfo = res.data
				this.myList[0].num = res.data.user_money
				this.myList[1].num = res.data.crystal
				this.myList[2].num = res.data.silver
				
			})
		},
		onHide() {
			this.kfshow = false
		},
		methods: {
			// 点击进入红包
			hongbao() {
				this.$p.navto('/pages/my/redEnvelope')
			},
			// 点击进入个人设置
			shezhi() {
				this.$p.navto('/pages/my/info')
			},
			// 点击投诉建议
			tousu() {
				this.show = true
			},
			hezuo() {
				this.show2 = true
			},

			opento(item){
				if(item.id == 2) {
					this.kfshow = true
				}else if(item.id == 5) {
					// this.getup(this.userinfo.pid);
					this.show2 = true
				}else {
					this.$p.navto(item.path)
				}
			},
			opento2(item){
				if(item.id == 10) {
					this.show = true
				}else {
					this.$p.navto(item.path)
				}
			},

			// 获取我的邀请人
			async getup(pid) {
				let n = await this.$http.index.getInfo({
					id: pid,
				});
				if (n.code == 1) {
					this.p_wx = n.data.wx ? n.data.wx : "暂未设置";
					this.p_QQ = n.data.qq ? n.data.qq : "暂未设置";
					this.p_phone = n.data.mobile ? n.data.mobile : "暂未设置";
				}
			},
			// 点击在线客服跳转到客服
			kefu() {
				this.$p.navto('/pages/my/onLine')
			},
			// 邀请好友
			yaoqing() {
				this.$p.navto('/pages/my/inviteFriends')
			},
			// 收款方式
			shou_money() {
				this.$p.navto('/pages/my/paymentMethod')
			},
			// 点击设置
			setting() {
				this.$p.navto('/pages/my/setting')
			},
			// 点击复制邮箱
			fuzhi() {
				this.$p.copy('hefeiyiyou@163.com')
			},
			// 点击关闭投诉建议
			cha() {
				this.show = false
			},
			cha2() {
				this.show2 = false
			},
			// 点击跳转实名认证
			shiming() {
				this.$p.navto('/pages/my/authentication')
			},
			copy(text) {
				if(text) {
					this.$p.copy(text)
				}else {
					this.$u.toast('暂未设置')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.mian {
		min-height: calc(100vh - 75px);
		overflow-y: auto;
		background: linear-gradient(180deg, #005FFE 0%, #2BD2F7 34%, #58F6D9 53%, #28E2F5 62%, #8B66FC 100%);
	}

	.cha {
		width: 50rpx;
		height: 50rpx;
		margin-top: 30rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.top_bg {
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		padding: 4vh 10px 10px;

		.top_tou2 {
			display: flex;
			align-items: center;
		}

		.top_tou {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.shezhi {
				width: 28rpx;
				margin-right: 3%;
			}

			.img {
				width: 50px;
				height: 50px;
				margin-right: 17px;
				border-radius: 25px;
			}

			.right_ho {
				font-size: 16px;
				font-weight: bold;
				color: #fff;

				.yaoqing {
					font-size: 14px;
					font-weight: 500;
					color: #fff;
					margin-top: 5px;
				}
			}
		}

		.qianbao {
			margin: 0 auto;
			background: linear-gradient(90deg, #4F4E4C 0%, #242424 100%);
			box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2), inset -4px 0px 5px 0px rgba(53, 53, 53, 1), inset 0px -4px 5px 0px rgba(77, 77, 77, 1);
			padding: 10px;
			margin-top: 14px;
			border-radius: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.rig_btn {
				width: 85px;
				height: 38px;
				line-height: 38px;
				text-align: center;
				background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
				border-radius: 5px;
				font-size: 14px;
				font-weight: bold;
				color: #282827;
			}

			.left_tu {
				display: flex;
				align-items: center;

				.daxiang {
					width: 57px;
					height: 57px;
					margin-right: 10px;
				}



				.left_mon {
					.shengyu {
						font-size: 13px;
						font-weight: 600;
						color: #FFFFFF;
						margin-bottom: 5px;
					}

					.numqian {
						font-size: 24px;
						font-weight: bold;
						color: #FFFFFF;

						text {
							font-size: 13px;
						}
					}
				}
			}
		}
	}

	.center_prop {
		position: relative;
		height: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;

		.text {
			font-size: 16px;
			font-weight: bold;
			color: #131314;
			margin: 0 32rpx;
		}

		.xing {
			width: 23rpx;
			height: 23rpx;
		}
	}

	.center {
		position: relative;
		height: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 41rpx;
		margin-bottom: 80rpx;

		.text {
			font-size: 16px;
			font-weight: bold;
			color: #131314;
			margin: 0 32rpx;
		}

		.xing {
			width: 23rpx;
			height: 23rpx;
		}

		.bg_qiu {
			position: absolute;
			width: 69rpx;
			height: 34rpx;
			border-radius: 20rpx;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		}
	}

	

	.liji {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #DBFBF9;
		border-radius: 10px;
		margin: 14px 0;

		image {
			width: 49%;
		}
	}


.setting {
	width: 35px;
}


.proprety {
	background: linear-gradient(360deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 100%);
	box-shadow: inset 0px 2px 0px 0px rgba(8,78,141,1);
	border-radius: 18px 18px 0px 0px;
	margin-top: 20px;
	padding: 20px 10px;

	p {
		color: #fff;
		font-size: 14px;
	}

	.p_list {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10px;

		.p_item {
			width: 34%;
			display: flex;
			flex-direction: column;
			padding: 10px;

			text:nth-child(1) {
				color: #FFFFFF;
				font-size: 12px;
			}
			text:nth-child(2) {
				color: #FFFFFF;
				font-size: 14px;
				font-weight: 600;
				margin-top: 4px;
			}
		}

		.p_item1 {
			background: url('http://img.cpgm.cc/panda/static/self/p11.png');
			background-size: 100% 100%;
			z-index: 3;
		}
		.p_item2 {
			background: url('http://img.cpgm.cc/panda/static/self/p22.png');
			background-size: 100% 100%;
			margin-left: -10px;
			z-index: 2;
			padding-left: 20px;
		}
		.p_item3 {
			position: relative;
			left: -10px;
			padding-left: 20px;
			background: url('http://img.cpgm.cc/panda/static/self/p33.png');
			background-size: 100% 100%;
			z-index: 1;
		}
	}

	
}

.botbox {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background: linear-gradient(180deg, #BEBEBE 0%, #F6F6F6 100%, #F7F7F7 100%);
	box-shadow: 0px 2px 9px 0px rgba(0,0,0,0.1), inset 0px 2px 0px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 13px;
	padding: 10px;
	margin: 10px 0;

	.w20 {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px 0;

		image {
			width: 40%;
		}
		text {
			color: #000000;
			font-size: 12px;
			margin-top: 5px;
			zoom: 0.94;
		}
	}

	.line {
		width: 1px;
		height: 32px;
		background: #000000;
		border-radius: 6px;
		opacity: 0.1;
	}
}



.invite {
	margin-top: 10px;
	position: relative;
	line-height: 0;

	image {
		width: 100%;
	}

	.button {
		position: absolute;
		bottom: 10%;
		left: 28%;
		width: 72px;
		height: 31px;
		background: #FFFFFF;
		border-radius: 4px;
		color: #000000;
		font-size: 13px;
		font-weight: 600;
	}
}



// 我的邀请人
.myinvite {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 20px;
	border-radius: 10px;

	.m_title {
		color: #000000;
		font-size: 20px;
		font-weight: 600;
		text-align: center;
	}
}



.weixin {
		position: relative;
		width: 100%;
		height: 57px;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		border: 1px solid #e3e3e3;
		display: flex;
		align-items: center;
		padding: 10px;
		margin: 5px 0;
	

		.wxh {
			flex: 1;
			font-size: 13px;
			font-weight: 600;
			color: #343434;
			border-right: 1px solid #e5e5e5;
		}

		.inp {
			flex: 3;
			width: 100%;
			padding: 0 10px;
			font-size: 14px;
			font-weight: bold;
			color: #000000;
		}

		.button {
			width: 45px;
			height: 27px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			color: #9D3A23;
			font-size: 12px;
			zoom: 0.95;
		}
	}

	.bot_box {
		padding: 20px;
		font-size: 14px;
		line-height: 1.5;
		color: #5b5757;
	}

	.copy {
		background: linear-gradient(275deg, #fe4768 0%, #ff867d 100%);
		border-radius: 7px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		width: 50%;
		margin: 0 auto;
		height: 40px;
		margin-top: 20px;
	}

	.http {
		font-size: 14px;
		font-weight: 700;
		color: #ff456c;
		line-height: 23px;
		margin: 10px 0;
	}

	.close {
		width: 30px;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.info {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 20px;

		image {
			width: 80px;
			border-radius: 20px;
		}

		text {
			margin-top: 10px;
			color: #000;
			font-size: 14px;
		}
	}



// 新部分

.main {
	background:  linear-gradient(180deg, #CFCFCF 0%, #F7F7F7 100%);
	box-shadow:inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 9px 9px 0px 0px;
	padding: 20px 10px;
	margin-top: -10px;
	min-height: calc(100vh - 288px);
}


.tit {
	color: #000000;
	font-size: 14px;
	font-weight: 600;
}

.cardbg {
	width: 100%;
}

.mycard {
	margin-top: 12px;
	position: relative;
}

.posap {
	position: absolute;
	left: 3%;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 14px;

	text  {
		font-weight: 600;
		font-size: 22px;
		margin-right: 4px;
	}
}

.card2 {
	position: absolute;
	right: 3%;
	bottom: 2px;
	width: 30%;
}


// 运营活动专区
.operate {
	margin-top: 10px;

	p {
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}


	.acbox {
		display: flex;
		align-items: center;
		white-space: nowrap;
		margin-top: 10px;

		image {
			height: 90px;
			margin-right: 12px;
		}
	}

}



.maskbox {
	position: relative;
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 20px;
	border-radius: 12px;

	h3 {
		position: relative;
		color: #000000;
		font-size: 20px;
		width: 50%;
		text-align: center;
		z-index: 2;
		margin: 0 auto;
	}

	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.m_content{
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		padding: 10px;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		p{
			color: #000;
			font-size: 14px;
			font-weight: 600;
		}

		.link {
			margin-top: 10px;
			color: #075F61;
			font-weight: 600;
			font-size: 14px;
		}

		.button {
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			height: 55px;
			width: 80%;
			margin: 0 auto;
			margin-top: 20px;
			color: #B73800;
			font-size: 16px;
			font-weight: 600;
		}
	}

	.m_closed {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 25px;
	}

}




// 客服弹窗
.kfbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5 45px 0px rgba(255,255,255,0.5), inset -5px -5 45px 0px rgba(255,255,255,0.5), inset 0px 2 0px 0px rgba(255,255,255,0.5);
	padding: 20px;
	border-radius: 10px;
	position: relative;

	.closedd {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 30px;
	}

	h3 {
		position: relative;
		color: #000000;
		font-size: 20px;
		width: 50%;
		text-align: center;
		z-index: 2;
		margin: 0 auto;
	}

	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.kfcontent {
		margin: 20px 0;
	}

	.k_item {
		background: #FFFFFF;
		box-shadow: 0px 2 4px 0px rgba(0,0,0,0.1);
		border-radius: 9px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;
		padding: 10px;

		.k_left {
			display: flex;
			align-items: center;

			image {
				width: 40px;
				margin-right: 10px;
			}
			text {
				color: #000;
				font-weight: 600;
			}
		}

		.you {
			width: 10px;
		}
	}

}

</style>